<template>
  <div class="DemoFunction Demo">
    <div class="part">
      <m-title>国际化</m-title>
      <m-button type="primary" @click="setLanguage('zh')">中</m-button>
      <m-button type="primary" @click="setLanguage('en')">en</m-button>

      <div class="item">{{$t('demo.Component.language')}}</div>
    </div>

    <div class="part">
      <m-title>页面跳转</m-title>
      <m-button @click="$m.to('Home',{edit: 999})">to</m-button>
      <m-button @click="$m.back()">back</m-button>
      <m-button @click="$m.close()">close</m-button>
      <m-button @click="$m.replace('UserInfo',{edit:666})">replace</m-button>
      <codemirror class="editor" v-model="code.route" :options="cmOptions"></codemirror>
    </div>

    <div class="part">
      <m-title>请求request</m-title>
      <m-row>
        <m-col :span="12">
          <m-button @click="getData('get')">get</m-button>
          <m-title>配置</m-title>
          <codemirror class="editor" v-model="code.request.getRequest" :options="cmOptions"></codemirror>
          <m-title>调用</m-title>
          <codemirror class="editor" v-model="code.request.get" :options="cmOptions"></codemirror>
        </m-col>
        <m-col :span="12">
          <m-button @click="getData('post')">post</m-button>
          <m-title>配置</m-title>
          <codemirror class="editor" v-model="code.request.postRequest" :options="cmOptions"></codemirror>
          <m-title>调用</m-title>
          <codemirror class="editor" v-model="code.request.post" :options="cmOptions"></codemirror>
        </m-col>
      </m-row>
      <m-row>
        <m-col :span="12">
          <m-button @click="getData('delete')">delete</m-button>
          <m-title>配置</m-title>
          <codemirror class="editor" v-model="code.request.deleteRequest" :options="cmOptions"></codemirror>
          <m-title>调用</m-title>
          <codemirror class="editor" v-model="code.request.delete" :options="cmOptions"></codemirror>
        </m-col>
        <m-col :span="12">
          <m-button @click="getData('put')">put</m-button>
          <m-title>配置</m-title>
          <codemirror class="editor" v-model="code.request.putRequest" :options="cmOptions"></codemirror>
          <m-title>调用</m-title>
          <codemirror class="editor" v-model="code.request.put" :options="cmOptions"></codemirror>
        </m-col>
      </m-row>
    </div>

    <div class="part">
      <m-title>消息message</m-title>
      <m-button @click="$m.message('消息')">默认消息</m-button>
      <m-button type="success" @click="$m.message('成功','success')">成功消息</m-button>
      <m-button type="danger" @click="$m.message('错误','error')">错误消息</m-button>
      <codemirror class="editor" v-model="code.message" :options="cmOptions"></codemirror>

      <m-title>确认消息confirm</m-title>
      <m-button @click="$m.confirm('是否要删除XXX，删除后不可撤回？')">确认消息</m-button>
      <codemirror class="editor" v-model="code.confirm" :options="cmOptions"></codemirror>
    </div>

    <div class="part">
      {{$route.meta}}
      <m-title>设置title</m-title>
      <m-button @click="$m.setTitle('Demo-Method(新)', $route)">设置title</m-button>
      <codemirror class="editor" v-model="code.setTitle" :options="cmOptions"></codemirror>

      <m-button @click="setSubtitle('副标题(新)')">设置副title</m-button>
      <codemirror class="editor" v-model="code.setSubtitle" :options="cmOptions"></codemirror>
    </div>

    <div class="part">
      <m-title>校验</m-title>
      <codemirror class="editor" v-model="code.$validator" :options="cmOptions"></codemirror>
    </div>

    <div class="part">
      <m-title>复制文字</m-title>
      <codemirror class="editor" v-model="code.copyText" :options="cmOptions"></codemirror>
    </div>

    <div class="part">
      <m-title>防抖</m-title>
      <codemirror class="editor" v-model="code.debounce" :options="cmOptions"></codemirror>
      <m-title>节流</m-title>
      <codemirror class="editor" v-model="code.throttle" :options="cmOptions"></codemirror>
    </div>




  </div>
</template>

<script>
import CodeMirror from "@/MUI/utils/CodeMirror";
import Vue from "vue";
import en from 'element-ui/lib/locale/lang/en';
import zh from 'element-ui/lib/locale/lang/zh-CN';
import locale from 'element-ui/lib/locale';

import {get, post, del, put} from '@/request/demo/Function';
import throttle from "@/MUI/utils/throttle";

export default {
  name: "DemoMethod",
  data() {
    return {
      cmOptions:{
        mode: 'text/javascript',
      },
      code: {
        route: 'this.$m.to(\'Home\',{edit: 999})\n' +
            'this.$m.back()\n' +
            'this.$m.close()\n' +
            'this.$m.replace(\'UserInfo\',{edit: 666})',
        request:{
          getRequest: 'export function get (data){\n' +
              '  return axios.get(\'/demo/function/get\',{\n' +
              '    params:data\n' +
              '  })\n' +
              '}\n',
          postRequest: 'export function post (data){\n' +
              '  return axios.post(\'/demo/function/post\',data)\n' +
              '}',
          deleteRequest: 'export function del (id){\n' +
              '  var url = $m.paramsSplice(\'/demo/function/delete\', id)\n' +
              '  return axios.delete(url)\n' +
              '}',
          putRequest: 'export function put (id, data){\n' +
              '  var url = $m.paramsSplice(\'/demo/function/put\', id)\n' +
              '  return axios.put(url, data)\n' +
              '}',
          get: 'get({data: 123}).then((res)=>{\n' +
              '}).catch((err)=>{})',
          post: 'post({data: 123}).then((res)=>{\n' +
              '}).catch((err)=>{})',
          delete: 'del(999).then((res)=>{\n' +
              '}).catch((err)=>{})',
          put: 'put(999, {data: 123}).then((res)=>{\n' +
              '}).catch((err)=>{})'
        },
        message: '$m.message(\'消息\')\n' +
            '$m.message(\'成功\',\'success\')\n' +
            '$m.message(\'错误\',\'error\')',
        confirm: '$m.confirm(\'是否要删除XXX,删除后不可撤回？\')',
        setTitle: '$m.setTitle(\'Demo-Method(新)\', $route)',
        setSubtitle: '$m.setMeta(this, \'subtitle\', \'副标题(新)\')',
        $validator: '$validator.isInt(999)\n' +
            '$validator.isFloat(0.999)\n' +
            '$validator.isJSON({a:123}})\n' +
            '$validator.isEmpty()',
        copyText: '$m.copyText(123123)',
        debounce: 'this.$m.debounce(()=>{\n' +
    '  console.log(\'debounce\')\n' +
    '})',
        throttle: 'this.$m.throttle(()=>{\n' +
            '  console.log(\'throttle\')\n' +
            '})'
      }
    }
  },
  components: {},
  created() {
    Vue.use(CodeMirror)
  },
  mounted() {
    this.setSubtitle("副标题")
  },
  methods: {
    setSubtitle(subtitle){
      this.$m.setMeta(this,"subtitle", subtitle)
    },
    setLanguage(data){
      this.$i18n.locale = data
      if(data === 'zh'){
        locale.use(zh)
      }else
      if(data === 'en'){
        locale.use(en)
      }
    },
    getData(type){
      var sendData = {
        type: type
      }
      if(type === 'get'){
        get(sendData).then((res)=>{
        }).catch((err)=>{})
      }else
      if(type === 'post'){
        post(sendData).then((res)=>{
        }).catch((err)=>{})
      }else
      if(type === 'delete'){
        del(999).then((res)=>{
        }).catch((err)=>{})
      }else
      if(type === 'put'){
        put(999, sendData).then((res)=>{
        }).catch((err)=>{})
      }

    }
  }
}

</script>

<style lang="scss" scoped>

</style>
